<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        #box{
            width:800px;
            height:200px;
            border: 1px solid #999;
            margin:10px auto;
            overflow: hidden;
        }
        #imglist{
            float: left;
        }
        #imglist img{
            width: 300px;
            height: 200px;
            float: left;
        }
        #content{
            width: 10000px;
        }
        #imglist2{
            width:1240px;
            margin: 0 auto;
        }
        #imglist2 img{
            width: 500px;
            height: 300px;
            background: url('./imgs/loading.gif') no-repeat center center;
        }
    </style>
</head>
<body>
    <h1>无缝滚动</h1>
    <hr>
    <div id="box">
        <div id="content">
            <div id="imglist" class="imglist">
                <img src="./imgs/Meinv001.jpg">
                <img src="./imgs/Meinv002.jpg">
                <img src="./imgs/Meinv003.jpg">
                <img src="./imgs/Meinv004.jpg">
                <img src="./imgs/Meinv005.jpg">
                <img src="./imgs/Meinv006.jpg">
                <img src="./imgs/Meinv007.jpg">
                <img src="./imgs/Meinv008.jpg">
                <img src="./imgs/Meinv009.jpg">
                <img src="./imgs/Meinv010.jpg">
            </div>
        </div>
    </div>
    <div id="imglist2">
        <img src="./imgs/Meinv001.jpg">
        <img src="./imgs/Meinv002.jpg">
        <img src="./imgs/Meinv003.jpg">
        <img src="./imgs/Meinv004.jpg">
        <img src="./imgs/Meinv005.jpg">
        <img src="./imgs/Meinv006.jpg">
        <img src="./imgs/Meinv007.jpg">
        <img src="./imgs/Meinv008.jpg">
        <img src="./imgs/Meinv009.jpg">
        <img src="./imgs/Meinv010.jpg">
    </div>

    <script>
        var imglist = document.getElementById('imglist');
        var imglist2 = document.getElementById('imglist2');
        //得到所有图片的宽度
        var width = imglist.offsetWidth;
        // console.log(width);

        //将所有图片克隆一份,追加当当前图片之后
        content.appendChild(imglist.cloneNode(true));



        function scrollImage(){
            //判断一轮图片是否滚动完
            if (box.scrollLeft >= width) {
                box.scrollLeft = 0;
            }
            box.scrollLeft += 10;
            console.log(box.scrollLeft);
        }

        setInterval(scrollImage, 100);


    </script>
</body>
</html>